<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DocumentFragment</title>
  </head>
  <body>
    <ul id="ulBox">
      <li>嘿嘿嘿</li>
      <li>嘿嘿嘿</li>
      <li>嘿嘿嘿</li>
      <li>嘿嘿嘿</li>
    </ul>
  </body>
</html>
<script>
  let ul = document.getElementById("ulBox"); //获取ul元素
  console.log(ul.childNodes); //查看ul所有子节点

  let fragment = document.createDocumentFragment(); //创建碎片文档

  while (ul.firstChild) { //text
    fragment.appendChild(ul.firstChild); //循环添加到碎片文档里
  }

  //转数组之后循环
  Array.from(fragment.childNodes).forEach((item) => {
     //如果类型为1的话 就替换
    if (item.nodeType == 1) {
      item.innerHTML = "好了";
    }
  });

  ul.appendChild(fragment); //把碎片文档赋值给 ul
</script>
